<template>
  <div id="table">
    <el-table
      ref="multipleTable"
      :data="tableData.row"
      border
      :show-header="showHeader"
      @selection-change="handleSelectionChange"
    >
      <el-table-column align="center" v-if="selection" type="selection" />
      <el-table-column
        v-for="(item, index) in tableData.col"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        :width="item.width || ''"
      >
        <!-- 根据业务增添自定义表格 -->
        <template slot-scope="scope">
          <!-- 默认显示数据 -->
          <span v-if="!item.type">{{ scope.row[item.prop] || '' }}</span>
          <!-- 按钮 -->
          <span v-if="item.type === 'Button'">
            <span v-for="(btn, index) in item.btnList" :key="index">
              <el-button
                style="margin-left: 10px"
                v-if="!(btn.isShow && btn.isShow(scope.row))"
                :disabled="btn.isDisabled && btn.isDisabled(scope.row)"
                :type="btn.type || 'primary'"
                :size="btn.size || 'mini'"
                :icon="btn.icon"
                @click="handleClick(index, scope, btn)"
              >
                {{ btn.label }}
              </el-button>
            </span>
          </span>
          <el-select
            v-if="item.type === 'Select'"
            v-model="selectValue"
            placeholder="请选择"
          >
            <el-option
              v-for="item in scope.row[item.prop]"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-input
            size="small"
            v-if="item.type === 'Input'"
            v-model="scope.row[scope.column.property]"
            placeholder="请输入"
            @blur="handleBlur"
          >
          </el-input>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Object,
      default: () => {}
    },
    selection: {
      type: Boolean,
      default: false
    },
    showHeader: {
      type: Boolean,
      default: true
    }
  },

  data() {
    return {
      selectValue: ''
    }
  },

  methods: {
    handleClick(index, row, btn) {
      this.$emit('btnClick', index, row, btn)
    },
    handleSelectionChange(val) {
      this.$emit('selectionChange', val)
    },
    toggleSelection() {
      this.$refs.multipleTable.clearSelection()
    },
    handleBlur() {
      this.$emit('blur', true)
    }
  }
}
</script>
